<template>
    <el-container>
        <el-header class="header">
            <h1>历史类书籍阅读</h1>
            <p>探索历史的深度，感受时间的沉淀</p>
        </el-header>

        <el-main class="container">
            <el-button type="primary" class="back-button" @click="goBack">
                <i class="el-icon-back"></i> 返回分类
            </el-button>

            <div class="filter">
                <el-select v-model="sortBy" placeholder="排序方式" class="filter-item">
                    <el-option label="默认排序" value="default"></el-option>
                    <el-option label="最新更新" value="newest"></el-option>
                    <el-option label="最多阅读" value="most-read"></el-option>
                    <el-option label="评分最高" value="highest-rated"></el-option>
                </el-select>

                <el-select v-model="bookType" placeholder="书籍类型" class="filter-item">
                    <el-option label="全部类型" value="all"></el-option>
                    <el-option label="中国历史" value="chinese"></el-option>
                    <el-option label="世界历史" value="world"></el-option>
                    <el-option label="考古历史" value="archaeology"></el-option>
                    <el-option label="历史小说" value="novel"></el-option>
                </el-select>

                <el-input v-model="searchText" placeholder="搜索书籍..." class="filter-item"
                    style="flex: 1; margin: 0 10px;"></el-input>

                <el-button type="primary" icon="el-icon-search" @click="applyFilter">搜索</el-button>
            </div>

            <div class="books-grid">
                <div class="book-card" v-for="book in filteredBooks" :key="book.id" @click="readBook(book)">
                    <div class="book-cover">
                        <img :src="book.cover" :alt="book.title" />
                        <div class="read-label">可在线阅读</div>
                    </div>
                    <div class="book-info">
                        <div class="book-title">{{ book.title }}</div>
                        <div class="book-author">{{ book.author }}</div>
                        <div class="book-desc">{{ book.description }}</div>
                        <div class="book-footer">
                            <div class="book-stats">
                                <i class="el-icon-view"></i> {{ book.views }} 人阅读
                            </div>
                            <button class="read-btn">立即阅读</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pagination" v-if="totalPages > 1">
                <el-pagination background layout="prev, pager, next" :total="totalItems" :page-size="pageSize"
                    :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
            </div>

            <div class="page-info" v-if="filteredBooks.length === 0">
                <p>暂无符合条件的书籍</p>
            </div>
        </el-main>

        <el-footer>
            <p style="text-align: center; margin: 0; padding: 10px 0; color: #666; font-size: 14px;">
                © 2025 墨韵书坊 版权所有
            </p>
        </el-footer>
    </el-container>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import daqin from '@/assets/img/daqin.jpg';
import aiji from '@/assets/img/aiji.jpg';
import chuci from '@/assets/img/chuci.avif';
import kaogu from '@/assets/img/kaogu.jpg';
import shiji from '@/assets/img/shiji.jpg';
import mingchao from '@/assets/img/mingchao.jpg';
import mingchao1 from '@/assets/img/mingchao.avif';
import quanqiu from '@/assets/img/quanqiu.avif';
import wanli from '@/assets/img/wanli.png';
import zizhi from '@/assets/img/zizhi.avif';
import renlei from '@/assets/img/renlei.avif';
import luomaren from '@/assets/img/luomaren.jpg';
import qiangpao from '@/assets/img/qiangpao.jpg';
import sanguo from '@/assets/img/sanguo.jpg';

const router = useRouter();
const route = useRoute();

const sortBy = ref('default');
const bookType = ref('all');
const searchText = ref('');
const currentPage = ref(1);
const pageSize = ref(8);

const historyBooks = ref([
    {
        id: 'book001',
        title: '史记',
        author: '司马迁',
        cover: shiji,
        description: '《史记》是中国西汉时期的历史学家司马迁所著的一部纪传体通史，记载了上自中国上古传说中的黄帝时代，下至汉武帝太初四年间共3000多年的历史。',
        views: 12456,
        type: 'chinese',
        lastUpdated: '2025-01-15',
        rating: 4.9,
    },
    {
        id: 'book002',
        title: '全球通史',
        author: '[美] L.S. 斯塔夫里阿诺斯',
        cover: quanqiu,
        description: '《全球通史》是斯塔夫里阿诺斯的代表作，采用全新的史学观点和方法编写的世界通史。该书奠定了修订版的范式，使这部原本为大学新生而作的基础教材，结果却成为再版重印达二十多次的畅销书。',
        views: 8923,
        type: 'world',
        lastUpdated: '2024-12-10',
        rating: 4.7,
    },
    {
        id: 'book003',
        title: '明朝那些事儿',
        author: '当年明月',
        cover: mingchao,
        description: '《明朝那些事儿》是一部以通俗的语言和生动的叙述，详尽讲述了明朝三百年历史的长篇历史读物。作者以史料为基础，以年代和具体人物为主线，对明朝十七帝和其他上百位历史人物的经历进行了全景式的呈现。',
        views: 15678,
        type: 'novel',
        lastUpdated: '2025-01-28',
        rating: 4.8,
    },
    {
        id: 'book004',
        title: '万历十五年',
        author: '[美] 黄仁宇',
        cover: wanli,
        description: '《万历十五年》是黄仁宇的成名之作，该书以1587年这一年为中心，展开了对整个明朝社会的深刻分析和解剖，通过对明朝皇帝万历以及其他历史人物的细致刻画，探讨了明朝中后期的政治、经济、文化等方面的问题。',
        views: 7842,
        type: 'chinese',
        lastUpdated: '2024-11-22',
        rating: 4.6,
    },
    {
        id: 'book005',
        title: '枪炮、病菌与钢铁',
        author: '[美] 贾雷德·戴蒙德',
        cover: qiangpao,
        description: '《枪炮、病菌与钢铁》是贾雷德·戴蒙德所著的一部经典著作，探讨了人类历史上不同社会和文明的发展差异的原因。作者从地理、生物、技术等多方面分析，为什么是欧亚大陆的文明征服了其他大陆，而不是相反。',
        views: 6534,
        type: 'world',
        lastUpdated: '2024-10-15',
        rating: 4.7,
    },
    {
        id: 'book006',
        title: '人类简史',
        author: '[以色列] 尤瓦尔·赫拉利',
        cover: renlei,
        description: '《人类简史：从动物到上帝》是以色列历史学家尤瓦尔·赫拉利的一部重要著作，全书分为四个部分，分别讲述了认知革命、农业革命、人类的融合统一以及科学革命，带读者回顾人类如何从史前古猿演变成为地球的主宰。',
        views: 11245,
        type: 'world',
        lastUpdated: '2025-01-05',
        rating: 4.9,
    },
    {
        id: 'book007',
        title: '资治通鉴',
        author: '司马光',
        cover: zizhi,
        description: '《资治通鉴》是北宋司马光主编的一部多卷本编年体史书，共294卷，历时19年完成。主要以时间为纲，事件为目，从周威烈王二十三年（公元前403年）写起，到五代后周世宗显德六年（公元959年）征淮南停笔，涵盖16朝1362年的历史。',
        views: 9876,
        type: 'chinese',
        lastUpdated: '2024-09-08',
        rating: 4.8,
    },
    {
        id: 'book008',
        title: '大秦帝国',
        author: '孙皓晖',
        cover: daqin,
        description: '《大秦帝国》是孙皓晖所著的一部长篇历史小说，共六部，全景式地展现了战国后期至秦帝国兴亡的历史画卷。作品以秦国的崛起和统一六国为主线，生动地刻画了秦始皇、商鞅等一批历史人物，展现了那个波澜壮阔的时代。',
        views: 13421,
        type: 'novel',
        lastUpdated: '2025-01-18',
        rating: 4.7,
    },
    {
        id: 'book009',
        title: '考古中国',
        author: '许宏',
        cover: kaogu,
        description: '《考古中国》是一部关于中国考古发现和研究的著作，详细介绍了中国从史前到明清各个历史时期的考古成果，展现了考古学如何帮助我们更好地理解中国古代文明的发展脉络。',
        views: 5432,
        type: 'archaeology',
        lastUpdated: '2024-12-05',
        rating: 4.6,
    },
    {
        id: 'book010',
        title: '罗马人的故事',
        author: '[日] 盐野七生',
        cover: luomaren,
        description: '《罗马人的故事》是盐野七生的代表作，共15册，生动地展现了罗马共和国和帝国时期的历史。作者以通俗易懂的语言和独特的视角，带领读者走进罗马人的世界，探索这个伟大文明的兴衰。',
        views: 6782,
        type: 'world',
        lastUpdated: '2024-11-18',
        rating: 4.5,
    },
    {
        id: 'book011',
        title: '明朝实录',
        author: '张廷玉等',
        cover: mingchao1,
        description: '《明实录》是明代历朝实录的总称，包括《太祖实录》、《太宗实录》等共十三朝正史实录，是研究明朝历史的重要原始资料。它按照年月顺序，详细记录了明朝皇帝的诏令、大臣的奏议等重要事件。',
        views: 4321,
        type: 'chinese',
        lastUpdated: '2024-10-25',
        rating: 4.4,
    },
    {
        id: 'book012',
        title: '三国演义',
        author: '罗贯中',
        cover: sanguo,
        description: '《三国演义》是中国古典四大名著之一，描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年群雄割据、三国鼎立的历史故事，塑造了一批叱咤风云的英雄人物。',
        views: 24567,
        type: 'novel',
        lastUpdated: '2025-01-10',
        rating: 4.9,
    },
    {
        id: 'book013',
        title: '埃及四千年',
        author: '温静',
        cover: aiji,
        description: '《埃及四千年》是一部关于古埃及文明的通俗历史读物，详细介绍了古埃及从史前到被罗马征服的历史发展，包括法老制度、金字塔建造、象形文字等重要文化元素，带领读者领略尼罗河文明的独特魅力。',
        views: 3456,
        type: 'world',
        lastUpdated: '2024-09-15',
        rating: 4.6,
    },
    {
        id: 'book014',
        title: '楚辞全注',
        author: '屈原 等',
        cover: chuci,
        description: '《楚辞》是中国古代浪漫主义文学的代表，收录了屈原、宋玉等楚国诗人的作品。这部作品集充满了丰富的想象力和华丽的辞藻，表达了诗人对理想的追求和对现实的批判，具有极高的文学价值。',
        views: 2345,
        type: 'chinese',
        lastUpdated: '2024-08-10',
        rating: 4.5,
    },
]);

const filteredBooks = computed(() => {
    let result = [...historyBooks.value];

    // 搜索框功能
    if (searchText.value) {
        const searchRegex = new RegExp(searchText.value, 'i');
        result = result.filter((book) =>
            searchRegex.test(book.title) ||
            searchRegex.test(book.author) ||
            searchRegex.test(book.description)
        );
    }

    // 类型筛选
    if (bookType.value !== 'all') {
        result = result.filter((book) => book.type === bookType.value);
    }

    // 排序
    if (sortBy.value === 'newest') {
        result.sort((a, b) => new Date(b.lastUpdated) - new Date(a.lastUpdated));
    } else if (sortBy.value === 'most-read') {
        result.sort((a, b) => b.views - a.views);
    } else if (sortBy.value === 'highest-rated') {
        result.sort((a, b) => b.rating - a.rating);
    } else {
        // 默认排序方式（按标题字母顺序）
        result.sort((a, b) => a.title.localeCompare(b.title));
    }

    // 分页
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return result.slice(start, end);
});

const totalItems = computed(() => historyBooks.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

const applyFilter = () => {
    currentPage.value = 1;
};

const handlePageChange = (page) => {
    currentPage.value = page;
};

const goBack = () => {
    router.go(-1);
};

const readBook = (book) => {
    // 这里可以实现跳转到阅读页面的逻辑
    // 例如：router.push(`/read/${book.id}`);
    console.log(`开始阅读《${book.title}》`);
    alert(`开始阅读《${book.title}》`);
};
</script>

<style scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.header p {
    color: #666;
    font-size: 14px;
}

.filter {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-item {
    margin-bottom: 10px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.book-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.book-cover {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.book-card:hover .book-cover img {
    transform: scale(1.05);
}

.read-label {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    font-size: 12px;
}

.book-info {
    padding: 15px;
}

.book-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.book-author {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.book-desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 60px;
}

.book-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-stats {
    font-size: 13px;
    color: #999;
}

.read-btn {
    background-color: #4a9eff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s;
}

.read-btn:hover {
    background-color: #3a8ee6;
}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.page-info {
    margin-top: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.back-button {
    margin-bottom: 20px;
}
</style>